<template>
<div class="flex  gap-4 mx-auto   ">
    <!--侧边题目导航 -->
    <el-affix position="top" :offset="60" >
    <div class="bg-white  w-[18%] px-8  py-6 overflow-y-auto fixed h-[calc(100vh-4rem)]">
        <div v-for="(item, index) in paperSection" :key="index" class="space-y-4 mb-4">
            <span class="text-sm font-bold  text-gray-700/90 whitespace-nowrap">
                {{ item.section_name}}(共{{ item.question_count }}题，{{ item.total_score }} 分)
            </span>
            <ul v-for="(question, index) in item.questions" :key="index"  class="flex  items-center" >
                <li class=" text-gray-500 text-sm truncate md:line-clamp-2  hover:text-blue-400 ">
                    <a :href="`#que_${question.id}`">{{ index+1 }} ({{ question.score }}分) {{ question.content }} </a>
                </li>
            </ul>
        </div>
    </div>
    </el-affix>
    <div class="  w-[20%]"></div>
    <!-- 试卷详情页 -->
    <div class="w-[80%] bg-white px-8 py-6  " >
           <!-- 试卷名称 及相关按钮-->
           <div class="flex">
                <div class="flex  flex-col space-y-2">
                    <span class="text-xl font-bold">{{ examInfo.title }}</span>
                    <div class="text-sm text-gray-500">
                        总体量 <span class="text-blue-500">{{ examInfo.totalQuestions }}</span>，
                        总分值 <span class="text-blue-500">{{ examInfo.totalScore }}</span>
                    </div>
                </div>
                <div class="flex ml-auto items-center space-x-2">
                    <el-button type="info" link @click="structureAnalysis" >
                        <font-awesome-icon :icon="['fas', 'chart-pie']"   class="mr-1"/>
                        试卷结构分析
                    </el-button>
                    <!-- <el-button type="info" link >
                        <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  class="mr-1" />
                        导出试卷
                    </el-button> -->
                     <el-dropdown trigger="hover">
                        <span class="text-gray-500 whitespace-nowrap text-sm">
                        <font-awesome-icon :icon="['fas', 'arrow-up-from-bracket']"  />
                        导出全部试卷
                        </span>
                    <template template #dropdown>
                    <el-dropdown-menu class="import-dropdown">
                        <el-dropdown-item @click="exportTemplate('word')">word标准格式</el-dropdown-item>
                        <el-dropdown-item @click="exportTemplate('wordTypography')">word排版格式</el-dropdown-item>
                        <el-dropdown-item @click="exportTemplate('excel')">Excel格式</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>
                </el-dropdown>
                    <el-checkbox v-model="isShowAnswer" label="显示答案"  />
                    
                </div>   
             
           </div>
           <!-- 题目信息部分 -->
           <div class="mt-10 ">
               <div v-for="(item, index) in paperSection" :key="index" class="space-y-4 mb-6">
                 <span class="text-base font-bold  text-gray-700/90 whitespace-nowrap">
                    {{ item.section_name}}(共{{ item.question_count }}题，{{ item.total_score }} 分)
                </span>
                 <div v-for="(question, index) in item.questions" :key="index"  class="flex  items-center "  :id="`que_${question.id}`">
                <div class="mb-4">
                    <span class="text-gray-500">{{ index+1 }}. ({{ question.type }}，{{ question.score }}分) </span>
                    <div class="mt-4 space-y-4">
                        <span> {{ question.content }} </span>
                        <div v-for="(option, index) in question.options">
                            {{ option }}
                        </div>
                        <div class="mt-4 flex flex-col space-y-2" v-show="isShowAnswer">
                            <div>
                                <span class="text-gray-500">答案：</span>
                                <span v-for="(answer, index) in question.answer">{{ answer }}</span>
                            </div>
                            <span class="text-gray-500">答案解析：</span>
                            <span>{{ question.explanation }}</span>
                            <span class="text-gray-500">难度：{{ question.difficulty }}({{ question.difficulty_desc }})</span>
                             <div>
                                <span class="text-gray-500">知识点：</span>
                                <span v-for="(point, index) in question.knowledge_point">{{ point }}</span>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
                </div>
           </div>
       
    </div>

</div>
</template>

<script setup>
import { ref,onMounted,watch} from 'vue'
import { useRoute ,useRouter} from 'vue-router'
import { useTabsStore } from "@/store/tabs";
import { getPaperDetail } from '@/api/exam'
const tabsStore = useTabsStore()
const route = useRoute()
const router = useRouter()
console.log(route.query.id)
console.log(route.params.id)

const examInfo = ref({
    id:null,
    title: '试卷详情页',
    totalQuestions:null,
    totalScore:null

})
const paperSection = ref([])
const  getPaperDetailData = () => { 
    //  根据试卷id 获取试卷中的详细信息
    getPaperDetail().then(res => {
        console.log(res,'<<<<')
        examInfo.value = res.data.data.examInfo
        paperSection.value = res.data.data.sections
    })
}
onMounted(() => { 
  getPaperDetailData()
})
//是否显示答案 
const   isShowAnswer = ref(false)

//导出试卷模板
const exportTemplate = (type) => {
    console.log(type)
   if(type=='word'){
      console.log('导出word标准格式');
      // 模态框显示 
    }else if(type=='excel'){
      console.log('导出excel标准格式');
      //直接导出 
    }else if(type=='wordTypography'){
      console.log('导出word排版格式');
      tabsStore.addTab({
            name: 'PaperExportSetting',
            title: '导出设置',
        });
        router.push({ name: 'PaperExportSetting', query: { source: 'paperDetail' ,paperId:examInfo.value.id} });


    }
}

//点击试卷结构分析
const  structureAnalysis = () => {
  tabsStore.addTab({
      name: 'PaperStructureAnalysis',
      title: '试卷结构分析',
    });
  // tabsStore.addTab({ title: "编辑题目", path: "/questionOption/create-question" })
  router.push({ name: "PaperStructureAnalysis" })
}

</script >
<style lang="less" scoped>
/** 去除点击时的黑色边框 */
.el-tooltip__trigger:focus {
  outline: none; // unset 这个也行
}
</style>